<template>
    <el-dialog :visible.sync="dialogView" top="10rem" width="70%" custom-class="verifyFiledBox">
        <div class="common-table-title">
            <div class="common-table-icon"></div>
            <div class="common-table-fl">手机快捷查询</div>
        </div>
        <div class="contentBox">
            <div class="reasonItem" style="margin-top: 2rem;">
                <el-table
                    :data="scheduledListData"
                    max-height="550"
                    ref="recordList"
                >
                    <el-table-column
                        v-for='(item, index) in scheduledListItem'
                        :key="index"
                        :prop='item.prop'
                        :label='item.label'
                        :width="item.width"
                        :min-width="90"
                        align='center'
                    >
                        <template slot-scope="scope">
                            <div>
                                {{translateData(scope.row, item)}}
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="btnsField">
                <div class="btn" @click="confirm">转预约到店</div>
                <div class="btn" style="background: #000;" @click="closeBox">取消</div>
            </div>
        </div>
    </el-dialog>
</template>
<script>
    import datas from './datas.js'
    import { getResource } from '../axios.js'
    import { verifyOrder } from '../../bookedCustomer/axios.js'
    import { Loading } from 'element-ui';
    import { DRcookie } from '@/assets/js/common.js'
    export default {
        data() {
            return {
                dialogView: false,
                scheduledListItem: datas.scheduledListItem,
                scheduledListData: [],
                infoType: ''
            }
        },
        props: [
            'sourceList',
            'currentShop',
            'currentLocate'
        ],
        methods: {
            openBox(data) {
                this.infoType = data.infoType
                if(data.infoType === 1) {
                    this.scheduledListItem = datas.scheduledListItem
                    this.scheduledListData = [data.reservationInfo]
                }
                if(data.infoType === 2) {
                    this.scheduledListItem = datas.scheduledListItemCustomer
                    this.scheduledListData = [data.customerInfo]
                }
                this.dialogView = true;
            },
            closeBox() {
                this.dialogView = false;
            },
            confirm() {
                if(this.infoType == 2) {
                    this.closeBox()
                    let loadingInstance = Loading.service({
                        text: '正在跳转',
                        background: 'rgba(0, 0, 0, 0.5)',
                        fullscreen: true
                    });
                    setTimeout(() => {
                        loadingInstance.close();
                        this.$router.replace({name: 'operateOrderShop', query: {phone: this.scheduledListData[0].phone}})
                    }, 2000)
                }else if(this.infoType === 1) {
                    this.closeBox()
                    let obj = this.scheduledListData[0]
                    if(obj.status != 4) {
                        let date = this.getFormateDate()
                        obj.reservationStartTime = date + ' ' + obj.reservationStartTime.split(' ')[1]
                        obj.reservationEndTime = date + ' ' + obj.reservationEndTime.split(' ')[1]
                        this.currentLocate && (obj.area = this.currentLocate)
                        this.currentShop && (obj.shop = this.currentShop)
                        obj.shopCode = DRcookie.get('shopCode')
                        obj.status = 4
                        verifyOrder(obj).then(res => {
                            if(res.data.status === 200) {
                                let loadingInstance = Loading.service({
                                    text: '正在跳转',
                                    background: 'rgba(0, 0, 0, 0.5)',
                                    fullscreen: true
                                });
                                setTimeout(() => {
                                    loadingInstance.close();
                                    this.$router.replace({name: 'treat', query: {searchKey: obj.id}})
                                }, 2000)
                            }
                        }).catch(err => {
                            console.log('check phone err', err)
                        })
                    }else {
                        let loadingInstance = Loading.service({
                            text: '正在跳转',
                            background: 'rgba(0, 0, 0, 0.5)',
                            fullscreen: true
                        });
                        setTimeout(() => {
                            loadingInstance.close();
                            this.$router.replace({name: 'treat', query: {searchKey: obj.id}})
                        }, 2000)
                    }
                }
                // this.closeBox()
                // let phone = this.scheduledListData[0].phone
                // this.$router.push({name: 'operateOrderShop', query: {phone: phone, infoType: this.infoType}})
            },
            translateData(data, item) {
                let res = ''
                if(item.prop === 'customerType') {
                    let obj = {
                        1: '成交客户',
                        2: '潜在客户',
                        3: '预约中客户'
                    }
                    res = obj[data[item.prop]]
                }else if(item.prop === 'bookingStatus') {
                    let obj = {
                        1: '进行中',
                        2: '已完结',
                        3: '作废'
                    }
                    res = obj[data[item.prop]] || '未预约'
                }else if(item.prop === 'reservationRange') {
                    if(data.reservationStartTime && data.reservationEndTime) {
                        res = `${data.reservationStartTime.split(' ')[1]}-${data.reservationEndTime.split(' ')[1]}`
                    }else {
                        res = ''
                    }
                }else if(item.prop === 'reservationDate') {
                    if(data.reservationStartTime) {
                        res = `${data.reservationStartTime.split(' ')[0]}`
                    }else {
                        res = ''
                    }
                }else {
                    res = data[item.prop]
                }
                return res
            },
            getFormateDate() {
                let date = new Date();
                let year = date.getFullYear();
                let month = date.getMonth() >= 9 ? date.getMonth() + 1 : `0${date.getMonth() + 1}`;
                let day = date.getDate();
                return `${year}-${month}-${day}`
            },
        },
        activated() {

        }
    }
</script>
<style scoped>
    .contentBox{
        width: 100%;
        min-width: 40rem;
    }
    .reasonItem{
        width: 95%;
        min-width: 40rem;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .btnsField{
        width: 30%;
        min-width: 20rem;
        margin: 4rem auto;
        text-align: center
    }
    .redSymbol{
        color: #FF0000;
    }
    .textArea{
        width: 19.5rem;
        margin-left: 1rem;
        resize: none;
        height: 15rem;
    }
    .name{
        margin-top: .7rem;
    }
    .btn{
        display: inline-block;
        width: 120px;
        font-size: 14px;
        height: 40px;
        border-radius: 20px;
        text-align: center;
        line-height: 40px;
        background: #7E6B5A;
        color: #FFF;
        cursor: pointer;
        margin: 0 8px;
    }
</style>